new WOW({
    callback: (e) => {
        if (e.dataset.type && e.dataset.type == 'textillate') {
            $(e).textillate({
                in: {
                    effect: e.dataset.inEffect,
                    delayScale: 0.5
                }
            })
        }
        if (e.dataset.type && e.dataset.type == 'rows') {
            if (e.dataset.rowsClass) {
                let rowsClass = e.dataset.rowsClass
                let rowsEls = Array.prototype.slice.call(document.getElementsByClassName(rowsClass))
                let delayIndex = 0
                rowsEls.forEach(item => {
                    delayIndex = createRowsTextAni(item, delayIndex)
                })
            } else {
                createRowsTextAni(e)
            }
        }
    }
}).init();
const createRowsTextAni = function (element, delayIndex = 0) {
    let text = $(element).text()
    let textArr = text.split("")
    let spanElements = []
    element.innerHTML = ""
    let spanTop = null
    let spanIndex = 0
    textArr.map(item => {
        let span = document.createElement('span')
        span.innerHTML = item
        element.append(span)
        if (spanTop != span.offsetTop) {
            spanTop = span.offsetTop
            spanIndex ++
            spanElements[spanIndex - 1] = []
        }
        spanElements[spanIndex - 1].push(span)
    })
    element.innerHTML = ""
    spanElements.forEach((item, index) => {
        let span = document.createElement('span')
        span.classList.add("animated","fadeInUp1","wow")
        span.style.display = 'block'
        span.setAttribute("data-wow-delay", `${0.2 * (index + delayIndex)}s`)
        item.forEach(children => {
            span.innerText += children.innerText
        })
        let span1 = document.createElement('span')
        span1.classList.add("overflow-h")
        span1.append(span)
        element.append(span1)
    })
    return spanElements.length
}
const rander = function (data) {
    let html = ``
    data.map(item => {
        html += item
    })
    return html
}
const header_navs = [
    {
        title: '首页',
        path: 'index.html'
    },{
        title: '数字设计',
        path: 'design.html',
        children: [
            {
                title: '品牌网站定制',
                path: 'brand.html'
            },{
                title: '系统界面设计',
                path: 'interface.html'
            },{
                title: '互动营销创意',
                path: 'marketing.html'
            }
        ]
    },{
        title: '功能开发',
        path: 'function.html',
        children: [
            {
                title: '电商平台',
                path: 'function.html'
            },{
                title: '在线教育',
                path: 'function.html'
            }
        ]
    },{
        title: '安全测评',
        path: 'secure.html'
    },{
        title: '项目陪跑',
        path: 'project.html'
    },{
        title: '职称证书',
        path: 'certificate.html',
        children: [
            {
                title: '职称评审',
                path: 'certificate.html?id=1'
            },{
                title: '论文软著',
                path: 'certificate.html?id=2'
            },{
                title: '学历证书',
                path: 'certificate.html?id=3'
            }
        ]
    },{
        title: '关于我们',
        path: 'about.html',
        children: [
            {
                title: '公司介绍',
                path: 'about.html'
            },{
                title: '公司动态',
                path: 'dynamics.html'
            }
            // ,{
            //     title: '加入我们',
            //     path: ''
            // }
        ]
    }
]

$(function () {
    function headerActive() {
        if ($(window).scrollTop() <= 10) {
            $("header").addClass("active")
        } else {
            $("header").removeClass("active")
        }
    }
    let section1TopAniStatus = false
    const createSection1TopAni = function () {
        const section1Top = document.querySelector(".section1-top")
        const section1TopHand = $(".section1-top-hand img")
        const getScale = function (val) {
            if (val && val !== 'none') {
                var matrix = val.split('(')[1].split(')')[0].split(',');
                var scaleX = parseFloat(matrix[0]);
                var scaleY = parseFloat(matrix[3]);
                if (scaleX == scaleY) {
                    return scaleX
                } else {
                    return {
                        scaleX,
                        scaleY
                    }
                }
            } else {
                return false
            }
        }
        let section1TopHandRotation = section1Top.classList.value.indexOf("section1-top-right") != -1 ? -90 : 90
        gsap.to(section1TopHand, {
            rotation: section1TopHandRotation,
            ease: "none",
            scrollTrigger: {
                trigger: ".section1-top",
                start: "top top",
                end: "bottom center",
                scrub: true
            },
            onReverseComplete: () => {
                section1TopAniStatus = true
                let small = $(".section1-top .section1-top-yellow-small")
                let big = $(".section1-top .section1-top-yellow-big")
                let smallLeft = small.css("left")
                let biglLeft = big.css("left")
                let smallScale = getScale(small.css("transform"))
                let bigScale = getScale(big.css("transform"))
                small.css({
                    "left": smallLeft,
                    "transform": `scale(${smallScale})`
                })
                big.css({
                    "left": biglLeft,
                    "transform": `scale(${bigScale})`
                })
                gsap.to(small, {
                    left: '24%',
                    ease: "none",
                    duration: 1
                })
                gsap.to(big, {
                    left: '0%',
                    ease: "none",
                    duration: 1,
                    onComplete: () => {
                        section1TopAniStatus = false
                    }
                })
                $(".section1-top").removeClass("active")
            }
        })
    }
    const section1TopAni = (function() {
        if ($(".section1-top").length != 0) {
            createSection1TopAni()
            return function() {
                if ($(window).scrollTop() >= 20 && !section1TopAniStatus) {
                    $(".section1-top").addClass("active")
                }
            }
        } else {
            return function() {}
        }
    })()
    section1TopAni()
    headerActive()
    $(window).scroll(function(e){
        headerActive()
        section1TopAni()
    })
})

new _utils.Active("header .header-container-h5 .right", {
    toggle: true,
    otherActive: {
        el: "header .header-container-h5 .nav"
    }
})
new _utils.Active("header .header-container-h5 .nav .nav-container > ul .link-arrow",{
    toggle: true,
    otherActive: {
        el: "header .header-container-h5 .nav .nav-container > ul .links"
    }
})